<!doctype html>
<html lang="en">
<head>
    <!--
       通过包裹数组更新元素的方法实现，本质就是做了两件事：
			    (1).调用原生对应的方法对数组进行更新。
				(2).重新解析模板，进而更新页面。
	   在Vue修改数组中的某个元素一定要用如下方法：
			   1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
			   2.Vue.set() 或 vm.$set()
    -->
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue监测数据改变的原理_数组</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h1>学校信息</h1>
    <h2>学校名称:{{ name }}</h2>
    <h2>学校地址:{{ address }}</h2>
    <hr/>
    <h1>学生信息</h1>
    <button @click.once="addSex">添加一个性别属性,默认值是男</button>
    <h2>学生姓名:{{ stu.name }}</h2>
    <h2>学生真实年龄:{{ stu.age.rage }}</h2>
    <h2>学生对外年龄:{{ stu.age.sage}}</h2>
    <h2 v-if="stu.sex">学生性别: {{ stu.sex }}</h2>
    <h2>朋友们</h2>
     <ul v-for="(f, index) in stu.friends" :key="index">
         <li>{{ f.name }} -- {{ f.age }}</li>
     </ul>
    <h2>爱好</h2>
    <!--
      Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
      push()
      pop()
      shift()
      unshift()
      splice()
      sort()
      reverse()
    -->
    <ul v-for="(h, index) in stu.hobbies" :key="index">
        <li>{{ h }}</li>
    </ul>
</div>
<script type="text/javascript">
    const vm = new Vue({
         el: '#root',
         data:{
             name: '武汉科技大学',
             address: '武汉',
             stu:{
                 name: 'tom',
                 age:{
                     rage: 12,
                     sage: 29
                 },
                 hobbies: ['抽烟', '喝酒', '烫头'],
                 friends: [
                     { name: 'Jerry', age: 23 },
                     { name: 'Jane', age: 18 }
                 ]
             }
         },
        methods:{
            addSex(){
                //这里this === vm
                //利用vue.set(或者vm.$set())api能够添加的属性变为响应式属性
                //注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。
                Vue.set(this.stu, 'sex', '男')
                // this.$set(this.stu, 'sex', '男');
            },
        }
     })
</script>
</body>
</html>
